<template>
	<view class="container">
		<view class="head">
			<u-button :custom-style="customStyle" size="mini" type="info" class="plus-btn" :disabled="btnDisabled" :loading="btnLoading"
			 @click="uploadImg">发布</u-button>
		</view>
		<textarea placeholder="这一刻的想法..." :auto-height="true" maxlength="-1" v-model="ocontent" class="post-txt"></textarea>
		<u-upload ref="uUpload" name="Image" :max-count="9" :header="header" :action="uploadImgUrl" @on-uploaded="submit"
		 :auto-upload="false"></u-upload>
		<!-- 选择圈子 -->
		<navigator url="/pages/choose-topic/choose-topic" class="choose-item">
			<image class="icon" src="/static/p_1.png"></image>
			<text class="txt">{{topicName}}</text>
			<u-icon class="u-icon" name="arrow-right"></u-icon>
		</navigator>
		<!-- 所在位置 -->
		<view @click="chooseLocation" class="choose-item">
			<u-icon class="icon" name="map" color="#999" size="40"></u-icon>
			<text class="txt">{{form.address || "所在位置"}}</text>
			<u-icon class="u-icon" name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: "#8687fd",
					color: "#fff",
					border: 0
				},
				btnDisabled: false,
				btnLoading: false,
				uploadImgUrl: this.$c.domain + 'common/upload',
				topicName: "选择圈子",
				form: {
					type: 1,
					topic_id: "",
					discuss_id: "",
					content: "",
					media: [],
					longitude: 0,
					latitude: 0,
					address: ""
				},
				ocontent:"",
				header: {
					token: uni.getStorageSync("token")
				},
			};
		},
		onShow(){
			this.$H.get("index/index")
		},
		onLoad(options) {
			uni.hideTabBar();
			if (options.topic_id) {
				this.form.topic_id = options.topic_id;
				this.topicName = options.topic_name;
			}
			if (options.discuss_id) {
				this.form.discuss_id = options.discuss_id;
			}

			let location = uni.getStorageSync("location_info");
			this.form.longitude = location.longitude;
			this.form.latitude = location.latitude;
		},
		onHide() {
			uni.showTabBar()
		},
		onUnload() {
			uni.showTabBar()
		},
		methods: {
			uploadImg() {
				this.btnDisabled = true;
				this.btnLoading = true;

				if (!this.form.topic_id) {
					this.$u.toast('请选择圈子');
					this.btnDisabled = false;
					this.btnLoading = false;
					return;
				}

				if (!this.ocontent) {
					this.$u.toast('内容不能为空');
					this.btnDisabled = false;
					this.btnLoading = false;
					return;
				}

				this.$refs.uUpload.upload();
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.form.address = res.name;
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
				});
			},
			submit(e) {
				let mediaList = [];
				e.forEach(function(item, index) {
					mediaList.push(item.response.result.url)
				})

				this.form.media = mediaList;
				this.form.content=this.utf16toEntities(this.ocontent)
				this.$H.post("post/addPost", this.form).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: "/pages/post-detail/post-detail?id=" + res.result.id
						})
					}
					this.btnDisabled = false;
					this.btnLoading = false;
				})
			},
			//把utf16的emoji表情字符进行转码成八进制的字符
			utf16toEntities(str) {
				var patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则  
				return str.replace(patt, function(char) {
					var H, L, code;
					if (char.length === 2) {
						H = char.charCodeAt(0); // 取出高位  
						L = char.charCodeAt(1); // 取出低位  
						code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法  
						return "&#" + code + ";";
					} else {
						return char;
					}
				});
			},
			//将编码后的八进制的emoji表情重新解码成十六进制的表情字符
			entitiesToUtf16(str) {
				return str.replace(/&#(\d+);/g, function(match, dec) {
					let H = Math.floor((dec - 0x10000) / 0x400) + 0xD800;
					let L = Math.floor(dec - 0x10000) % 0x400 + 0xDC00;
					return String.fromCharCode(H, L);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'plus-post.scss';
</style>
